<template>
  <span>
    <template v-for="menu in menuList">
      <el-menu-item
        v-if="!menu.children || !menu.children.length"
        :key="menu.url"
        :index="menu.url"
        :route="menu.url"
        :disabled="!!menu.disabled"
        @click="onClickMenu(menu)"
      >
        <i :class="menu.icon"></i>
        <span slot="title">{{menu.title}}</span>
      </el-menu-item>
      <el-submenu
        v-else
        :key="menu.url"
        :index="menu.url"
      >
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{menu.title}}</span>
        </template>
        <el-menu-item
          v-for="children in menu.children"
          :key="children.url"
          :index="children.url"
          :disabled="!!children.disabled"
          @click="onClickMenu(children)"
        >{{children.title}}</el-menu-item>
      </el-submenu>
    </template>
  </span>
</template>

<script>
export default {
  props: {
    menuList: Array,
  },
  methods: {
    onClickMenu (menu) {
      if (menu.url.indexOf('http') === 0 || menu.url.indexOf('/api') === 0) {
        window.open(menu.url)
      } else {
        this.$router.push(menu.url)
      }
    },
  },
}
</script>
